#@adminLayout()
#define css()
<style type="text/css">

</style>
#end

#define main()
<div class="jbolt_page" data-key="#(pmkey)"  data-dontchangeleftnav="true">
    <div class="jbolt_page_title">
        <div class="row">
            <div class="col-12">
                <h1>
                    #setLocal(JboltWithTabs=CACHE.getUserJBoltAdminWithTabs(session[SessionKey.ADMIN_USER_ID]))
                    #if(JboltWithTabs)
                    <i class="fa fa-list"></i>
                    #else
                    <a class="btn btn-outline-secondary mr-1" href="javascript:history.go(-1)"><i class="fa fa-chevron-left"></i></a>
                    #end
                    #if(commodity_id??)
                    商品管理-修改商品后端分类-[#(CommodityName??)]
                    #else
                    商品管理-添加商品-选择商品分类
                    #end
                </h1>
            </div>
        </div>
    </div>
    <div class="jbolt_page_content">
        <div class="j_category_title">当前选择的是：<span id="j_choose_commodity_type_#(commodity_id?? 0)">#(commodity_full_name?? "暂未选择")</span> （<span class="text-danger">涉及规格和属性，请谨慎选择</span>）</div>
        <div class="j_category_selectbox" id="commdoity_type_select_box_#(commodity_id?? 0)">

        </div>
        <form action="/auth/mall/commodity/#((commodity_id??)?'update_commodity_type':'add_commodity')" data-submittabportal id="commodity_choose_form_#(commodity_id?? 0)" method="get">
            #if(commodity_id??)
            <input type="hidden" name="commodity_id" value="#(commodity_id??)"/>
            #end
            <input type="hidden" name="commodity_type_id" value="#(commodity_type_id??)" id="commodity_type_#(commodity_id?? 0)" data-rule="required;pint" data-tips="请选择商品分类"/>
            <div class="text-center" style="margin-top:20px;"><button id="commodity_preadd_nextokBtn_#(commodity_id?? 0)" disabled="disabled" type="button"  style="width:200px" class="btn btn-success">选定分类，进入下一步</button></div>
        </form>
    </div>
</div>
#end
#define js()
<script>


    $(function(){
        function init_edit_commodity_type_#(commodity_id?? 0)(){

        #if(commodity_id??)
                let key="#(back_commodity_key??)";
            let keyArr=key.split("_");
            let size=keyArr.length;
            let checkedIndex=0;
        #end


            //下一步按钮
            let commodity_preadd_nextokBtn=$("#commodity_preadd_nextokBtn_#(commodity_id?? 0)");
            //选择分类的 父box
            let commdoity_type_box=$("#commdoity_type_select_box_#(commodity_id?? 0)");
            //已经选了谁
            let j_choose_commodity_type=$("#j_choose_commodity_type_#(commodity_id?? 0)");
            //最终选择分类的ID
            let commodity_type=$("#commodity_type_#(commodity_id?? 0)");

            commodity_preadd_nextokBtn.one("click",submitThisForm);
            /**
             * 初始化一个类目列表 根据传入的PID找子类
             */
            function init_type_select_box(pid,checkId){
                if(!pid){pid=0;}
                commodity_type.val("");
                commodity_preadd_nextokBtn.attr("disabled","disabled");
                var url="/mall/type/commodity/selectbox/"+pid;
                Ajax.get(url,function(ret){
                    var categorys=ret.data;
                    if(categorys&&categorys.length>0){
                        insertNewSelect(pid,categorys);
                    }else{
                        //设置按钮可以点击
                        if(pid>0){
                            commodity_preadd_nextokBtn.removeAttr("disabled");
                            commodity_type.val(pid);
                        }
                    }

                    if(checkId){
                        var lastSelect=commdoity_type_box.find(".j_category_select").last();
                        if(lastSelect&&lastSelect.length>0){
                            lastSelect.find("ul>li[data-id='"+checkId+"']").addClass("selected");
                        }

                        if(checkedIndex<size){
                            checkedIndex++;
                            newCheckId=keyArr[checkedIndex];
                            init_type_select_box(checkId,newCheckId);
                        }

                    }
                });
            }

            /**
             * 将数据渲染出来
             */
            function insertNewSelect(pid,categorys){
                let select='<div class="j_category_select" id="j_category_select_#(commodity_id?? 0)_'+pid+'"><ul></ul></div>';
                let lastSelect=commdoity_type_box.find(".j_category_select").last();
                if(lastSelect&&lastSelect.length>0){
                    lastSelect.after(select);
                }else{
                    commdoity_type_box.append(select);
                }

                let newSelect=$("#j_category_select_#(commodity_id?? 0)_"+pid +" >ul");
                for(var i in categorys){
                    newSelect.append('<li data-id="'+categorys[i].id+'">'+categorys[i].name+'</li>');
                }
            }
            /**
             * 绑定分类点击事件处理
             */
            function init_type_select_box_event(){
                $("body").off("click","#commdoity_type_select_box_#(commodity_id?? 0) .j_category_select>ul>li").on("click","#commdoity_type_select_box_#(commodity_id?? 0) .j_category_select>ul>li",function(){
                    let li=$(this);
                    let pid=li.data("id");
                    j_choose_commodity_type.text("暂未选择");
                    let select=li.closest(".j_category_select");
                    select.find("li.selected").removeClass("selected");
                    li.addClass("selected");
                    select.nextAll().remove();
                    init_type_select_box(pid);
                    let lis=$("#commdoity_type_select_box_#(commodity_id?? 0) .j_category_select li.selected");
                    if(lis&&lis.length>0){
                        let title="";
                        lis.each(function(){
                            let theLi=$(this);
                            if(title){
                                title=title+" > "+theLi.text();
                            }else{
                                title=theLi.text();
                            }

                        });
                        j_choose_commodity_type.text(title);
                    }
                });
            }

            function submitThisForm(){
                let form=$("#commodity_choose_form_#(commodity_id?? 0)");
                if(FormChecker.check(form)){
                    let j_choose_commodity_type=$("#j_choose_commodity_type_#(commodity_id?? 0)").text();
                    LayerMsgBox.confirm("确定选择分类:["+j_choose_commodity_type+"]?",function(){
                        form.submit();
                    });
                }
            }

            let selects=commdoity_type_box.find(".j_category_select");
            if(selects&&selects.length==0){
                init_type_select_box_event();
            #if(commodity_id??)
                    init_type_select_box(0,keyArr[checkedIndex]);
            #else
                init_type_select_box(0);
            #end
            }
            openLeftNav("/auth/mall/commodity");
        }


        init_edit_commodity_type_#(commodity_id?? 0)();
    });

</script>
#end

